<div id="app">
  <input type="text">
</div>

<!-- 
  双向绑定的原生实现
   1. 数据 -> 视图 
      数据一旦发生变化  视图会使用最新的数据进行更新

   2. 视图 -> 数据
      视图一旦发生变化  会把视图当前用户输入的最新的值 反向影响到数据
 -->

<!-- 
   数据 -> 视图
   本质: 如何知道数据变化了
  -->

<!-- 
    视图 -> 数据
    本质： 如何可以拿到当前视图最新的值  监听事件通过事件回调拿到最新的输入值
 -->

<script>
  //  let info = {
  //    name:'cp'
  //  }
  let info = {}
  let _name = ''
  Object.defineProperty(info, 'name', {
    // 获取info.name属性会执行 
    // return 值就是你获取到的值
    get() {
      return _name
    },
    // 修改info.name属性时候会执行
    set(value) {

      // 使用最新的数据 value 去更新视图的逻辑呢？
      // 什么是视图更新？ dom操作
      // 使用value 让input元素的value跟着变化
      _name = value
      document.querySelector('#app input').value = value
    }
  })
  document.querySelector('#app input').addEventListener('input', (e) => {
    // 反向赋值
    info.name = e.target.value
  })

  /*
    1.数据响应式  object.defineProperty()
    2.数据驱动视图   数据变化 视图会使用最新的数据进行更新
    3.如何让视图更新  视图更新离不开dom操作
    4.视图发生变化 指的是用户因为输入 input 对视图的显示进行了修改
    5.视图变化如何拿到当前视图最新的输入内容  基于事件监听  通过回调函数中的事件对象e拿到
  */

</script>